<template>
    <div>
        <h1>App</h1> {{ msg }}
        <button @click="title = 'hi app'">setTitle</button>

        <TsCart></TsCart>
    </div>
</template>
<script setup>
import { inject, provide, ref, shallowRef, readonly } from 'vue';
import { message, title } from './keys.js'
import TsCart from './components/TsCart.vue';
const title = ref('hello APP');
const name = ref('jack');

function updateName(value) {
    name.value = value;
}
// 提供
provide('title', readonly(title));

/*
    提供数据约定
    1. 以数组的方式提供数据
    2. 第一个元素必须是只读特性（针对注入）数据
    3. 第二个元素是一个方法，可以修改第一个元素值
*/
provide('name', {
    name: readonly(name),
    updateName
});
provide('age', 20);

// 注入

const msg = inject(message)

</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>